<!-- 访客量 -->
<template>
	<view class="container">
		<text class="title">访客量</text>

		<view class="charts-box">
			<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" />
		</view>

		<view class="statis">
			<view class="item">
				<text class="value">368</text>
				<text class="label">访客数</text>
			</view>
			<view class="item">
				<text class="value">180</text>
				<text class="label">浏览次数</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";

	const chartData = ref({});
	const opts = {
		color: ["#1890FF", "#FC8452", "#91CB74", "#EE6666", "#FAC858", "#73C0DE", "#3CA272", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		enableScroll: false,
		legend: {
			show: true,
			position: "left",
			lineHeight: 25
		},
		extra: {
			rose: {
				type: "radius",
				minRadius: 50,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: -90,
				labelWidth: 15,
				border: true,
				borderWidth: 2,
				borderColor: "#FFFFFF",
				// linearType: "custom"
			}
		}
	}

	onMounted(() => {
		getServerData();
	});

	const getServerData = () => {
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [{
					data: [
						{ "name": "访客数", "value": 368 },
						{ "name": "浏览次数", "value": 180 }
					]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 25rpx;

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding: 30rpx 0 0 14rpx;
		}

		.charts-box {
			height: 456rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 28rpx;
			padding: 10rpx;
			box-sizing: border-box;

			.charts {
				width: 100%;
				height: 100%;
			}
		}

		.statis {
			display: flex;
			align-items: center;
			height: 150rpx;
			margin-top: 36rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.item {
				flex: 1;
				text-align: center;

				.value {
					display: block;
					font-weight: bold;
					font-size: 40rpx;
					color: #222222;
					line-height: 1.5;
				}

				.label {
					display: block;
					font-size: 26rpx;
					color: #222222;
					line-height: 1.5;
				}
			}
		}
	}
</style>